<template>
  <div>
    <h3>{{ isNew ? "创建" : "编辑" }}课程:</h3>
    <ele-form :form-data="data" :form-desc="fields" :request-fn="handleSubmit">
    </ele-form>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { request } from "@/http/request";
@Component
export default class CourseEdit extends Vue {
  @Prop(String) readonly id: string | undefined;
  data = {};
  fields = {
    course: { label: "课程名称", type: "input" },
    cover: { label: "课程封面图", type: "input" },
  };
  created() {
    !this.isNew && this.fetch();
  }
  get isNew() {
    return this.id === undefined;
  }
  async fetch() {
    const res = await request.get(`courses/${this.id}`);
    this.data = res.data;
  }
  async handleSubmit(data: any) {
    // eslint-disable-next-line no-console
    console.log(data);
    const url = this.isNew ? "courses" : `courses/${this.id}`;
    const method = this.isNew ? "post" : "put";
    await request[method](url, data);
    this.handleSuccess(this.isNew ? "创建成功" : "修改成功");
    this.$router.go(-1);
  }
  handleSuccess(msg: string) {
    this.$message.success(msg);
  }
}
</script>

<style scoped>
</style>